import React from 'react'
import { Card, Row, Col } from 'antd';
import DataDisplayCard from './DataDisplayCard'
import { Pie, TinyArea, TinyColumn } from '@ant-design/plots';

const HomeTop = () => {
  const visitData = [4000, 2000, 7000, 2000, 4000, 1000, 6000, 5000, 2000, 5000, 7000, 3000];
  return (
    <div>
      <Row gutter={[16, 16]}>
        <Col xl={6} lg={12} md={12} sm={24} xs={24}>
          <DataDisplayCard
            explain='指标说明'
            title='今日累计交易金额'
            data='22455'
            growthRate={{
              week: '12%',
              weekGrowthRate: 'up',
              day: '11%',
              dayGrowthRate: 'down'
            }}
          />
        </Col>
        <Col xl={6} lg={12} md={12} sm={24} xs={24}>
          <DataDisplayCard
            explain='指标说明'
            title='今日累计收入'
            data='22455'
            growthRate={{
              week: '12%',
              weekGrowthRate: 'up',
              day: '11%',
              dayGrowthRate: 'down'
            }}
          />
        </Col>
        <Col xl={6} lg={12} md={12} sm={24} xs={24}>
          <DataDisplayCard
            explain='指标说明'
            title='今日累计支出'
            data='22455'
            chart={
              <TinyArea
                color="#975FE4"
                smooth
                data={visitData}
              />
            }
          />
        </Col>
        <Col xl={6} lg={12} md={12} sm={24} xs={24}>
          <DataDisplayCard
            explain='指标说明'
            title='今日交易笔数'
            data='22455'
            chart={
              <TinyColumn data={visitData} />
            }
          />
        </Col>
      </Row>
    </div>
  )
}

export default HomeTop